<template>
  <div class="body">
    <div class="top">
      <dl>
        <dd>
          <h1>欢迎{{ infoData.mobile | mobil }}</h1>
          <h2>半途而废的背后，有千万种借口</h2>
        </dd>
        <dt><img src="../../assets/dimg/d_person_logo.png" alt="" /></dt>
      </dl>

      <ol>
        <h1>SZ·Club会员 | 加入会员并享优质任务</h1>
        <h2>每天仅2元 享受优质任务</h2>

        <div v-if="state == 0">
          <a>￥{{ infoData.vip_price | money }}</a> <span>/年</span
          ><i @click="openmember()">立即续费</i>
        </div>
        <p v-if="state != 0 && infoData.vipend_at">
          会员有效期至 {{ infoData.vipend_at.slice(0, 10) }}
        </p>
      </ol>
    </div>

    <div class="con">
      <h1>VIP会员专属特权</h1>
      <ul>
        <li>
          <img src="../../assets/img/vip_icon_01.png" alt="" />
          <h2>专属任务名额</h2>
          <h3>高额会员专属任务</h3>
        </li>
        <li>
          <img src="../../assets/img/vip_icon_02.png" alt="" />
          <h2>高额任务津贴</h2>
          <h3>全量任务额外津贴</h3>
        </li>
        <li>
          <img src="../../assets/img/vip_icon_03.png" alt="" />
          <h2>快速结算通道</h2>
          <h3>结算周期加速一倍</h3>
        </li>
        <li>
          <img src="../../assets/img/vip_icon_04.png" alt="" />
          <h2>分享任务佣金</h2>
          <h3>邀请好友奖励</h3>
        </li>
        <li>
          <img src="../../assets/img/vip_icon_05.png" alt="" />
          <h2>团队管理佣金</h2>
          <h3>团队联盟佣金全收益</h3>
        </li>
        <li>
          <img src="../../assets/img/vip_icon_06.png" alt="" />
          <h2>专属培训老师</h2>
          <h3>专属1对1服务</h3>
        </li>
      </ul>
    </div>

    <div class="btm">
      <h1>VIP会员须知</h1>
      <dl>
        <dd><img src="../../assets/img/vip_icon_vip.png" alt="" /></dd>
        <dt>
          希望你会积累更多的人脉资源！利用空闲时间获取现金收益！加入抖赚会员俱乐部，你会获得更多益趣任务，成为朋友圈中的斜杠达人！
        </dt>
      </dl>
    </div>

    <div v-if="state == 0" class="button" @click="openmember()">立即开通</div>
    <div style="height: 0.1rem;" v-html="formAction"></div>
  </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast, Indicator } from 'mint-ui';

export default {
  name: '',
  data() {
    return {
      state: 0,
      infoData: {},
      formAction: '',
    };
  },
  mounted() {
    this.getvipPrice();
    console.log(sessionStorage.openid);
  },
  methods: {
    getvipPrice() {
      axiosPost(
        'users/get_user_club',
        {
          user_id: JSON.parse(localStorage.getItem('userinfo')).user_id,
        },
        (res) => {
          if (res.code === -2) {
            localStorage.removeItem('userinfo');
            Toast({
              message: '登录过期，请重新登录',
              duration: 1000,
            });
            setTimeout(() => {
              this.$router.push({ path: '/login', query: { path: '0' } });
            }, 1500);
            return;
          }
          //console.log(res)
          if (res.code !== 1) {
            return Toast(res.msg);
          }
          this.infoData = res.data;
          this.state = res.data.grade;
        }
      );
    },
    //开通会员
    openmember() {
      let ua = window.navigator.userAgent.toLowerCase();
      if (ua.indexOf('micromessenger') > -1) {
        return Toast({
          message: '请复制链接到浏览器进行升级',
          duration: 1000,
        });
      }

      axiosPost(
        'order/lvl_up',
        {
          user_id: JSON.parse(localStorage.getItem('userinfo')).user_id,
        },
        (res) => {
          this.formAction = res;
          const div = document.createElement('div');
          div.innerHTML = res;
          document.body.appendChild(div);
          document.forms[0].submit();
          if (res.code) {
            if (res.code !== 1) {
              return Toast(res.msg);
            }
          } else {
            Indicator.open({
              text: '唤起支付...',
              spinnerType: 'fading-circle',
            });
            setTimeout(() => {
              Indicator.close();
            }, 3000);
          }
        }
      );
    },
  },
  beforeDestroy() {
    Indicator.close();
  },
};
</script>

<style scoped lang="less">
@import '../../style/default';
.body {
  background: @color4;
}
.top {
  height: 4.8rem;
  background: url(/img/vip_img_bannerbj.def3961e.jpg) center -0.9rem no-repeat;
  background-size: 7.5rem 5rem;
  padding: 0 0.4rem;
  overflow: hidden;
  margin-top: -0.5rem;

  dl {
    margin-top: 0.9rem;
    overflow: hidden;
    dd {
      float: left;
      width: calc(100% - 0.8rem);
      h1 {
        font-size: 0.41rem;
        color: @color4;
        font-weight: normal;
      }
      h2 {
        font-size: @font26;
        color: rgba(255, 255, 255, 0.8);
        font-weight: normal;
        margin-top: 0.1rem;
      }
    }
    dt {
      width: 0.8rem;
      height: 0.8rem;
      background: @color4;
      border-radius: 0.4rem;
      float: right;
      margin-top: 0.1rem;
      img {
        width: 100%;
      }
    }
  }

  ol {
    width: 6.7rem;
    height: 2.4rem;
    background: #41424f
      url()
      center center no-repeat;
    background-size: 6.7rem 2.4rem;
    border-radius: 0.2rem;
    margin: 0.4rem auto 0;
    overflow: hidden;

    h1 {
      font-size: 0.28rem;
      font-weight: 400;
      margin: 0.39rem 0.4rem 0.1rem;
      color: #ffffd7;
    }
    h2 {
      font-size: 0.22rem;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      margin: 0 0.4rem;
    }

    p {
      font-size: @font28;
      font-weight: 400;
      margin-top: 0.42rem;
      padding: 0 0.4rem;
      color: #ffffd7;
    }

    div {
      height: 0.5rem;
      color: @color4;
      font-weight: 400;
      margin-top: 0.22rem;
      padding: 0 0.4rem;
      a {
        font-size: 0.49rem;
        color: @color4;
        font-weight: 400;
      }
      span {
        font-size: 0.28rem;
      }
      i {
        width: 2.08rem;
        height: 0.6rem;
        border: 1px solid rgba(255, 255, 215, 1);
        border-radius: 0.3rem;
        font-size: 0.37rem;
        font-weight: 400;
        color: rgba(255, 255, 215, 1);
        line-height: 0.6rem;
        text-align: center;
        float: right;
        margin-top: 0.195rem;
        -webkit-transform: scale(0.7) translate(-20%, -20%);
        transform: scale(0.7) translate(20%, -20%);
      }
    }
  }
}

.con {
  padding: 0 0.4rem;
  h1 {
    font-size: 0.28rem;
    font-weight: bold;
    margin: 0.3rem 0 0.3rem;
    color: #000000;
  }
  ul {
    overflow: hidden;
    margin-top: 0.2rem;
    li {
      float: left;
      width: 33.3%;
      margin-bottom: 0.4rem;
      img {
        display: block;
        margin: 0 auto;
        width: 0.85rem;
      }
      h2 {
        font-size: @font26;
        font-weight: normal;
        color: rgba(0, 0, 0, 1);
        text-align: center;
      }
      h3 {
        font-size: 0.2rem;
        font-weight: normal;
        color: rgba(170, 170, 170, 1);
        text-align: center;
      }
    }
  }
}

.btm {
  padding: 0 0.4rem;
  overflow: hidden;
  h1 {
    font-size: @font28;
    font-weight: normal;
    color: rgba(0, 0, 0, 1);
  }
  dl {
    width: 6.78rem;
    height: 1.5rem;
    margin-top: 0.2rem;
    margin-bottom: 0.1rem;
    overflow: hidden;
    padding-top: 0.4rem;
    box-shadow: 0 0 0.1rem rgba(240, 240, 240, 1);
    dd {
      width: 0.4rem;
      margin-left: 0.2rem;
      float: left;
      img {
        width: 0.39rem;
      }
    }
    dt {
      float: left;
      width: calc(100% - 1rem);
      margin-left: 0.2rem;

      font-size: 0.26rem;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
  }
}

.button {
  width: 6.7rem;
  height: 0.86rem;
  background: @color1;
  border-radius: 0.43rem;
  text-align: center;
  line-height: 0.86rem;
  font-size: @font32;
  font-weight: 400;
  color: @color4;
  margin: 0.4rem auto;
}
</style>
